<template>
    <div>
      <el-dialog
          title="修改角色"
          :visible.sync="updateDialogVisible"
          width="30em"
          @open="initialize"
          :before-close="handleClose">
          <el-form :model="roles" :rules="rules" ref="roleForm" label-width="100px" class="demo-ruleForm">
              <el-form-item label="角色名称" prop="roleName">
                  <el-input v-model="roles.roleName"></el-input>
              </el-form-item> 
              <el-form-item label="角色描述" prop="roleDesc">
                  <el-input v-model="roles.roleDesc"></el-input>
              </el-form-item> 
          </el-form>
          <span slot="footer" class="dialog-footer">
                  <el-button @click="offuser">取 消</el-button>
                  <el-button type="primary" @click="yesUser">确 定</el-button>
              </span>
      </el-dialog>
    </div>
  </template>
  
  <script>
  export default {
      name:'updateRole',
      data() {
          return {
              roles:{
                  roleName:'',
                  roleDesc:'',
              },
              //防止失败的时候重复点击确定按钮
              num1:true,
              rules:{
                  roleName: [
                  { required: true, message: '请输入角色名称', trigger: 'blur' },
                  { min: 3, max: 15, message: '长度在 3 到 15 个字符', trigger: 'blur' }
                  ],  
                  roleDesc: [
                      { required: true, message: '请输入角色描述', trigger: 'blur' },
                      { min: 4, max: 8, message: '长度在 4 到 8 个字符', trigger: 'blur' }
                  ],
              }
          };
      },
  methods:{
      //点击关闭按钮执行的函数
      handleClose(){
          this.$refs.roleForm.resetFields()
          this.offUser()
      },
      //关闭模态框
      offuser(){
          //清空表单
          this.$refs.roleForm.resetFields()
          //关闭模态框
          this.offUser()
      },
      // 点击确定按钮
      yesUser(){
          //节流阀
          if(this.num1){
              this.num1 = false
              setTimeout(() => {
                  this.num1 = true
              }, 2000);
              this.$refs.roleForm.validate((valid) => {
              if (valid) {
                  this.$http.put(`roles/${this.role.id}`,this.roles).then(
                  respose => {//正确请求时执行的代码
                      if (respose.data.meta.status!=200) {//修改失败
                          // console.log(respose.data.meta.status)
                          this.$message({
                          message: '修改失败,'+respose.data.meta.msg,
                          type: 'error',
                          showClose: true,
                          duration:4000
                          })
                      }
                      else{//修改成功
                        //   console.log(respose.data)
                          this.$message({
                              message: '修改角色成功',
                              type: 'success',
                              duration:2000
                          })
                            // console.log(this.users);
                            // console.log();
                          this.offuser()
                          this.getRolessList()
                      }   
                  },
                  error => {//错误时执行的代码
                      console.log(error.code);
                      this.$message({
                          message: '修改失败'+ error.code,
                          type: 'error',
                          duration:2500
                      })
                  },
                  )
              }
          })
          }
         
          
      },
    //数据初始化
    initialize(){
        this.roles.roleName = this.role.roleName
        this.roles.roleDesc = this.role.roleDesc
    }
  },
  props:['offUser','updateDialogVisible','getRolessList','role']
  }
  </script>
  
  <style>
  
  </style>